<template>
	<el-menu :default-active="activeIndex" class="header-nav" mode="horizontal" :router="true" @select="handleSelect">
		<div class="nav-container">
			<!-- 左侧导航菜单 -->
			<div class="left-nav">
				<el-menu-item v-for="(menu, index) of menus" :key="index" :index="menu.url" class="nav-item">
					<i v-if="menu.icon" :class="['nav-icon', menu.icon]"></i>
					<span class="nav-text">{{ menu.name }}</span>
					<div class="active-indicator"></div>
				</el-menu-item>
			</div>

			<!-- 右侧版本选择 -->
			<div class="right-nav">
				<div class="version-container">
					<span class="version-label">版本：</span>
					<version-select v-model="version" @change="handleChange" class="version-select"></version-select>
				</div>
			</div>
		</div>
	</el-menu>
</template>


<script>
	import VersionSelect from "./VersionSelect.vue";
	export default {
		name: "Header",
		components: {
			VersionSelect
		},
		data() {
			return {
				version: this.$version.getVersion(),
				activeIndex: localStorage.getItem("header-index") || "/",
				menus: [{
						name: "首页",
						url: '/',
						icon: "el-icon-s-home",
					},
					{
						name: "物品",
						url: "/item",
					},
					{
						name: "建筑",
						url: "/build",
					},
					{
						name: "配方",
						url: "/recipe",
					},
					{
						name: "计算器",
						url: "/calculation",
					},
				],
			};
		},
		methods: {
			handleSelect(index) {
				// console.log(index);
				localStorage.setItem("header-index", index)
			},
			handleChange() {
				this.$version.setVersion(this.version);
			}
		},
		mounted() {
			this.version = this.$version.getVersion();
		}
	};
</script>
<style lang="less" scoped>
	@import "@/assets/less/variables.less";

	.header-nav {
		background: @color-white;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
		border-bottom: 1px solid @color-border;
		height: 60px;

		/deep/ .el-menu-item {
			margin: 0 2px; // 增加横向间距
			padding: 0 28px !important; // 加宽内边距
			width: 120px;
			height: 60px;
			text-align: center;
			transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 更流畅的动画曲线

			&:active {
				transform: scale(0.96); // 点击缩放效果
			}

			&.is-active {
				.active-indicator {
					height: 3px; // 加粗激活指示条
				}
			}

			&::before {
				// 文字下划线动画
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0;
				height: 2px;
				background: @color-primary;
				transition: width 0.3s ease;
			}

			&:hover::before {
				width: 100%;
			}
		}

		.nav-text {
			position: relative;
			display: inline-block;
			padding: 0; // 增加垂直间距

		}

		.nav-container {
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24px;
		}

		.left-nav {
			display: flex;
			align-items: center;
		}

		.nav-item {
			position: relative;

			&::after {
				// 添加点击涟漪效果
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				background: rgba(@color-primary, 0.1);
				border-radius: 6px;
				transform: translate(-50%, -50%) scale(0);
				opacity: 0;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
				pointer-events: none;
			}

			&:active::after {
				transform: translate(-50%, -50%) scale(1);
				opacity: 1;
				transition-duration: 0.15s;
			}
		}


		.nav-icon {
			font-size: 18px;
			margin-right: 8px;
		}

		.active-indicator {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: @color-primary;
			opacity: 0;
			transition: opacity 0.25s ease;
		}

		.right-nav {
			display: flex;
			align-items: center;
		}

		.version-container {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.version-label {
			color: @color-subtext;
			font-size: 14px;
		}

		.version-select {
			width: 140px;

			/deep/ .el-input__inner {
				background: @color-white;
				border: 1px solid @color-border;
				border-radius: 6px;
				color: @color-text;
				height: 36px;
				line-height: 36px;

				&:hover {
					border-color: @color-primary;
				}

				&:focus {
					border-color: @color-primary;
					box-shadow: 0 0 0 2px rgba(@color-primary, 0.1);
				}
			}

			/deep/ .el-select__caret {
				color: @color-subtext;
			}
		}
	}

	@media (max-width: 768px) {
		.header-nav {
			height: 56px;
			padding: 0 12px;

			/deep/ .el-menu-item {
				height: 56px;
				line-height: 56px;
				margin: 0 10px;
				padding: 0 18px !important;
				font-size: 15px; // 保持移动端文字可读性
			}

			.nav-icon {
				margin-right: 4px;
			}

			.version-label {
				display: none;
			}

			.version-select {
				width: 120px;
			}
		}
	}
</style>